<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .error {
        border-color: red;
        color: red;
    }
    </style>
</head>

<body>
    <form id="registerForm">
        <div>
            请输入用户名：
            <input type="text" name="userName" />
        </div>
        <div>
            请输入密码：
            <input type="text" name="password" />
        </div>
        <div>
            请输入邮编：
            <input type="text" name="isZipCode" />
        </div>
        <div>
            <input type="checkbox" name="check" value="1">
            <input type="checkbox" name="check" value="2">
        </div>
        <div>
            输入限制3到5:
            <input type="text" name="range" value="">
        </div>
        <div>
            塔塔的长度是4到6
            <input type="text" name="param" value="">
        </div>
        <div>
            爸爸的手机:
            <input type="text" name="faPhone" value="">
        </div>
        <div>
            妈妈的手机:
            <input type="text" name="maPhone" value="">
        </div>
        <div>
            <button type="button" id="submit">提交</button>
        </div>
    </form>
    <button type="button" id="vUser">验证用户名</button>
</body>
<script src="validator.js"></script>
<script>
window.onload = function() {
    var v = new Validator({
        id: document.getElementById("registerForm"),
        errorClass: "error",
        errorElement: "span",
        rules: {
            userName: {
                required: true
                    // , minLength: 2
            },
            password: {
                minLength: 5
            },
            isZipCode: {
                isZipCode: true,
                 required: true
            },
            range: {
                range: [3, 5]
            },
            param: {
                tt: [4, 6]
            }
            ,
            faPhone:  {
                required: function() {
                    return document.getElementsByName("maPhone")[0].value.length ==0?true:false;
                },
                tt: [4, 6]
            },
            maPhone: {
                required: function() {
                    return document.getElementsByName("faPhone")[0].value.length ==0?true:false;
                },
                tt: [4, 6]
            }
        },
        message: {
            userName: {
                required: "用户名不能为空"
            },
            password: {
                minLength: "最小长度为5"
            }
        },
        Submit: function(data) {
            console.log(data)
        }

    });
    v.addMethod("isZipCode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return v.optional(element)||tel.test(value);
    }, "邮政编码要6个");

    v.addMethod("tt", function(value, element, param) {
        var length = value.length;
        return v.optional(element)||(length >= param[0] && length <= param[1]);
    }, "塔塔长度要在{0}和{1}之间");

   v.init();



    function id(id) {
        return document.getElementById(id);
    }
    id("submit").onclick = function() {
        console.log(v.valid())
    }
    id("vUser").onclick = function() {
        v.valid(document.getElementsByName("isZipCode")[0]);
    }

    var faInput=document.getElementsByName("faPhone")[0];
    var maInput=document.getElementsByName("maPhone")[0];
    var tmpfachangeFn=faInput.onchange;
     var tmpmachangeFn=maInput.onchange;

    // document.getElementsByName("faPhone")[0].onchange=function(){
    //     typeof tmpfachangeFn=='function'?tmpfachangeFn():'';
    //     console.log("去校验妈妈")
    //     v.valid(maInput);
    // }
    //  document.getElementsByName("maPhone")[0].onchange=function(){
    //     typeof tmpmachangeFn=='function'?tmpmachangeFn():'';
    //      v.valid(faInput);
    // }
    v.addEvent(faInput,'change,propertychange,input',function(){
        console.log("修改妈妈")
         v.valid(maInput,"required");
    })
    v.addEvent(maInput,'change,propertychange,input',function(){
        console.log("修改爸爸")
         v.valid(faInput,"required");
    })

}
</script>

</html>
